<template>
  <div class="page flex_c flex_align">
    <div class="flex_c container" ref="generateImg">
      <div class="header">我的依附角色是...</div>
      <div class="name">{{scoresObj[0].title}}</div>
      <div class="image_cont">
        <div class="left_line"></div>
        <img :src="{{scoresObj[0].images.dynamic}}" alt="" />
        <div class="tag flex_c">
          <span>＃依附关系图鉴</span>
        </div>
      </div>
      <div class="tag_cont">
        <div class="tag_item" v-for="item in scoresObj[0].tags" :key="item">{{ item }}</div>
      </div>
      <div class="block">
        <p class="title">从小的情感需求：</p>
        <span>{{ scoresObj[0].desc.childhood }}</span>
      </div>
      <div class="block">
        <p class="title">在爱情中的模样：</p>
        <span>{{ scoresObj[0].desc.love }}</span>
      </div>
      <div class="block">
        <p class="title">面对潜在的焦虑或挫折情境时：</p>
        <span>{{ scoresObj[0].desc.frustration }}</span>
      </div>
    </div>
    <!-- <div class="line"></div>
    <div class="invite_root">
      <div class="pl-20 pr-20">
        <div class="subTitle flex_r">
          <span>邀请人&nbsp;</span><strong>axe</strong><span>&nbsp;的依附角色是...</span>
        </div>
        <div class="subTxt">焦慮型依附</div>
        <div class="subTags">
          <div>＃焦躁</div>
          <div>＃低自尊</div>
          <div>＃過度付出</div>
          <div>＃渴望被愛</div>
          <div>＃容易失眠</div>
        </div>
      </div>
      <div :class="['other_info flex_c gap-10 mb-20', !isMore ? 'more' : '']" class="">
        <div class="block">
          <p class="title">從小的情感需求：</p>
          <span>可能經常無法得到父母正確且即時的回應，著急地期盼與渴望父母的愛</span>
        </div>
        <div class="block">
          <p class="title">在愛情中的模樣：</p>
          <span>自認深愛伴侶，但內心深處總是不安，擔心對方會離開。經常尋找需要被照顧的對象，甚至會過度付出；因為最接近愛的感受，就是「被需要」。遇到逃避型的時候，容易陷入「付出、忍耐、爆炸」的循環中</span>
        </div>
        <div class="block">
          <p class="title">面對潛在的焦慮或挫折情境時：</p>
          <span>感到不自在、感到害怕、較不容易調適自己</span>
        </div>
      </div>
      <p class="show_button"  @click="isMore = !isMore">
        <span>{{ isMore ? '展开了解' : '收起' }}「焦虑型依附」特质</span>
      </p>
    </div>
    <div class="line"></div>
    <div class="our_box invite_root">
      <div class="pl-20 pr-20">
        <div class="subTitle flex_r"><span>我和&nbsp;</span><strong>axe</strong><span>&nbsp;的合盘结果</span></div>
        <div class="subTxt tc">追逃型伴侶關係</div>
        <img src="https://farhugs-web-assets.farhugs.net/public/images/match_anx_avo.1.43c94558322e715037392d95bc64769f.gif" alt="">
      </div>
      <div class="flex_c gap-10 mb-20">
        <div class="block">
          <p class="title">從小的情感需求：</p>
          <p class="txt">相愛相殺的你追我逃</p>
          <span>可能經常無法得到父母正確且即時的回應，著急地期盼與渴望父母的愛</span>
        </div>
        <div class="block">
          <p class="title">在愛情中的模樣：</p>
          <span>自認深愛伴侶，但內心深處總是不安，擔心對方會離開。經常尋找需要被照顧的對象，甚至會過度付出；因為最接近愛的感受，就是「被需要」。遇到逃避型的時候，容易陷入「付出、忍耐、爆炸」的循環中</span>
        </div>
        <div class="block">
          <p class="title">面對潛在的焦慮或挫折情境時：</p>
          <span>感到不自在、感到害怕、較不容易調適自己</span>
        </div>
      </div>
    </div> -->
    <div class="line"></div>
    <!-- <div class="list">
      <div class="list_root flex_c">
        <button class="list_item invite" tabindex="0" type="button">
          <svg width="31.96px" height="48.36px" viewBox="0 0 34 50" class="star"><g fill="#FFC632" fill-rule="evenodd" stroke="#000" stroke-width="2"><path d="M23.604 1.365a2 2 0 0 0-2.436 1.009l-1.81 3.667-4.046.588c-.546.08-1.009.373-1.315.783a2 2 0 0 0 .207 2.628l2.928 2.854-.691 4.03a1.994 1.994 0 0 0 .338 1.493 2 2 0 0 0 2.564.615l3.619-1.902 3.619 1.902a1.994 1.994 0 0 0 1.524.14 2 2 0 0 0 1.378-2.248l-.692-4.03 2.928-2.854c.396-.385.597-.895.604-1.406a2 2 0 0 0-1.712-2.005l-4.046-.588-1.81-3.667a1.994 1.994 0 0 0-1.151-1.009ZM7.76 20.572a2 2 0 0 0-1.88 1.848l-.133 1.76-1.524.888a1.994 1.994 0 0 0-.926 1.22 2 2 0 0 0 1.176 2.36l1.633.667.375 1.724c.118.54.443.981.873 1.258s.967.39 1.507.272a2 2 0 0 0 1.1-.662l1.141-1.346 1.756.176c.55.055 1.07-.118 1.466-.442a2 2 0 0 0 .435-2.6l-.928-1.5.71-1.616a1.994 1.994 0 0 0 .033-1.53 2 2 0 0 0-2.339-1.217l-1.714.418-1.317-1.174a1.994 1.994 0 0 0-1.445-.504ZM10.1 38.584a1.82 1.82 0 0 0-2.394.146l-.806.799-1.114-.211a1.814 1.814 0 0 0-1.363.284 1.82 1.82 0 0 0-.6 2.322l.51 1.013-.546.994c-.241.44-.282.938-.151 1.385a1.82 1.82 0 0 0 2.023 1.289l1.12-.173.778.826c.345.366.805.558 1.27.572a1.82 1.82 0 0 0 1.85-1.526l.183-1.12 1.026-.484a1.814 1.814 0 0 0 .869-2.422 1.82 1.82 0 0 0-.812-.84l-1.008-.52-.144-1.125a1.814 1.814 0 0 0-.69-1.209Z"></path></g></svg>
          <div style="text-align: left; transform: translate(-19px, 0px)">
            <span>邀请朋友合盘</span>
            <div class="desc">测验两人的依附风格与相处模式</div>
          </div>
          <div class="new">全新功能</div>
        </button> 
        <button class="list_item" type="button">
          <span>抱抱教练陪你改善依附困境</span><span class="MuiTouchRipple-root www-ssr-w0pj6f"></span>
        </button>
        <div class="list_item" @click="createPoster">
          <span>储存个人结果图</span>
          <span class="MuiTouchRipple-root www-ssr-w0pj6f"></span>
        </div>
        <div class="list_item">
          <span>复制测验连结</span><span class="MuiTouchRipple-root www-ssr-w0pj6f"></span>
        </div>
        <div class="list_item">
          <span>返回测验首页</span><span class="MuiTouchRipple-root www-ssr-w0pj6f"></span>
        </div>
      </div>
    </div>
    <div class="line"></div> -->
  </div>
  <!-- <van-overlay :show="isShow"  :lock-scroll="false">
    <img class="close" @click="isShow = false" src='https://content.daylucky.cn/admin/image/pg09q2cg551irdq5847ufixb.png' />
    <img class="posterImg" :src="posterImg" alt="">
    <p class="tips mt-10">长按保存图片</p>
  </van-overlay> -->
</template>
<script setup>
import { ref, nextTick, onBeforeMount } from 'vue'
// import { showToast } from 'vant'

// let isShow = ref(false)
// let loading = ref(null)
// let posterImg = ref('')
let scoresObj = reactive([
  {
    type: 1,
    title: "焦虑型依附",
    tags: ["焦躁", "低自尊", "过度付出", "渴望被爱", "容易失眠"],
    images: {
      posterImg: 'https://magic.mirror.source.axeastro.com/appsourse/anxiety.png',
      dynamic: 'https://magic.mirror.source.axeastro.com/appsourse/anxiety.gif',
      static: 'https://magic.mirror.source.axeastro.com/appsourse/anxiety_static.png'
    },
    desc: {
      childhood: "可能经常无法得到父母正确且即时的回应，着急地期盼与渴望父母的爱",
      love: "自认深爱伴侣，但内心深处总是不安，担心对方会离开。经常寻找需要被照顾的对象，甚至会过度付出；因为最接近爱的感受，就是「被需要」。遇到逃避型的时候，容易陷入「付出、忍耐、爆炸」的循环中",
      frustration: "感到不自在、感到害怕、较不容易调适自己"
    }
  },
  {
    type: 2,
    title: "逃避型依附",
    tags: ["高度压抑", "希望没有情绪", "害怕沟通", "自我保护", "身心分离"],
    images: {
      posterImg: 'https://magic.mirror.source.axeastro.com/appsourse/escape.png',
      dynamic: 'https://magic.mirror.source.axeastro.com/appsourse/escape.gif',
      static: 'https://magic.mirror.source.axeastro.com/appsourse/escape_static'
    },
    desc: {
      childhood: "可能经常受到父母忽略，因此儘管渴望拥有爱，却不敢对父母抱有期待",
      love: "较难表达自己的情感需求，因为担心伴侣不会有同等的回应。逃避型常被认为在「搞消失」，让人摸不着头绪。其实他们并非「感受不到情绪」，而是内建了一套自我压抑机制，有时甚至可以关闭情绪，常使得伴侣感到挫折",
      frustration: "感到麻烦的、压抑的、不太愿意调适自己"
    }
  },
  {
    type: 3,
    title: "矛盾型依附",
    tags: ["空洞感", "情感关系混乱", "深陷迷雾", "情绪不稳", "自我伤害冲动"],
    images: {
      posterImg: 'https://magic.mirror.source.axeastro.com/appsourse/contradiction.png',
      dynamic: 'https://magic.mirror.source.axeastro.com/appsourse/contradiction.gif',
      static: 'https://magic.mirror.source.axeastro.com/appsourse/contradiction_static.png'
    },
    desc: {
      childhood: "可能偶尔被父母忽略、偶尔被父母满足、偶尔又受到父母情绪虐待，不知道自己能不能被爱，一切都是「未知」",
      love: "同时具有高焦虑与高逃避特质，无法压抑也无法顺畅表达情绪。容易在多段感情中穿梭，寻求能够承接自己情绪的对象。当遇到强烈衝突时，矛盾型有时会出现「解离」的机制，保护自己的内心不受伤害",
      frustration: "情绪起伏大、易担心害怕、最为困难调适自己"
    }
  },
  { 
    type: 4,
    title: "安全型依附",
    tags: ["信任感", "充满自信", "互相尊重", "正向乐观", "理性沟通倾听"],
    images: {
      posterImg: 'https://magic.mirror.source.axeastro.com/appsourse/safe.png',
      dynamic: 'https://magic.mirror.source.axeastro.com/appsourse/safe.gif',
      static: 'https://magic.mirror.source.axeastro.com/appsourse/safe_static.png'
    },
    desc: {
      childhood: "大多时候都能得到父母正确且即时的回应，对父母也能抱持开放、平等的态度",
      love: "打从心底爱着伴侣，不会担心对方提出分手或自己遭到遗弃；相信对方可以沟通，因此能放心对伴侣生气，也愿意等待",
      frustration: "相对自在、适当、有弹性调适自己"
    }
  }
])


onBeforeMount(() => {
})


</script>
<style lang="scss" scoped>
.page {
  padding: 25px;
  background-color: #f9f2e1;
  gap: 20px;
  margin: 0px auto;
  color: rgb(0, 0, 0);
  .container {
    gap: 10px;
  }
  .header {
    font-size: 14px;
    line-height: 20px;
  }
  .name {
    font-size: 36px;
    line-height: 54px;
    // font-weight: bold;
  }
  .image_cont {
    position: relative;
    margin: -77px auto 0;
    .left_line {
      position: absolute;
      left: 4.5px;
      height: 236px;
      width: 1px;
      background-image: linear-gradient(rgb(0, 0, 0) 70%, transparent 30%);
      background-size: 2px 12px;
      background-repeat: repeat-y;
      bottom: 0px;
      &:before,
      &:after {
        content: "";
        display: block;
        height: 9px;
        width: 9px;
        border-radius: 5px;
        border: 1px solid rgb(0, 0, 0);
        position: absolute;
        box-sizing: border-box;
        left: -4px;
        background-color: rgb(249, 242, 225);
      }
      &:before {
        top: -4px;
      }
      &:after {
        bottom: -4px;
        background-color: rgb(0, 0, 0);
      }
    }
    img {
      width: 325px;
      height: 325px;
      display: block;
    }
    .tag {
      width: 14px;
      position: absolute;
      bottom: 0px;
      right: 0px;
      gap: 10px;
      font-size: 14px;
      line-height: 20px;
      color: rgb(0, 0, 0);
    }
  }
  .tag_cont {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 10px 0px;
    .tag_item {
      border: 2px solid rgb(0, 0, 0);
      border-radius: 17px;
      background-color: rgb(255, 255, 255);
      padding: 3px 13px;
      font-size: 16px;
      line-height: 24px;
      // font-weight: bold;
      white-space: nowrap;
    }
  }
  .other_info {
    overflow: hidden;
    transition: max-height .4s;
    max-height: 0;
    &.more {
      max-height: 400px;
    }
  }
  .block {
    color: rgb(0, 0, 0);
    border: 2px solid rgb(0, 0, 0);
    border-radius: 0px 20px;
    background-color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    .title {
      margin: 0px 0px 5px;
      font-size: 16px;
      line-height: 24px;
      // font-weight: bold;
    }
    .txt {
      font-size: 16px;
      padding-top: 5px;
      line-height: 24px;
      // font-weight: bold;
      margin-bottom: 10px;
      color: #A3D524;
    }
  }
  .line {
    position: relative;
    height: 1px;
    width: calc(100% - 9px);
    background-image: linear-gradient(
      to right,
      rgb(0, 0, 0) 70%,
      transparent 30%
    );
    background-size: 12px 2px;
    background-repeat: repeat-x;
    &:before,
    &:after {
      content: "";
      display: block;
      height: 9px;
      width: 9px;
      border-radius: 5px;
      border: 1px solid rgb(0, 0, 0);
      position: absolute;
      box-sizing: border-box;
      background-color: rgb(249, 242, 225);
      top: -4px;
    }
    &:before {
      left: -4px;
    }
    &:after {
      right: -4px;
      background-color: rgb(0, 0, 0);
    }
  }
  .list {
    width: 100%;
    margin: 10px 0px 0px;
    padding: 0px 25px;
    .list_root {
      gap: 20px;
      .list_item {
        text-align: center;
        color: rgb(0, 0, 0);
        background-color: rgb(249, 242, 225);
        padding: 8px 0px;
        font-size: 14px;
        line-height: 20px;
        // font-weight: bold;
        border: 2px solid rgb(0, 0, 0);
        border-radius: 25px;
        // &.invite {
        //   border-radius: 38px;
        //   .star {
        //     position: absolute;
        //     left: -10px;
        //     top: -10px;
        //     z-index: 1;
        //   }
        //   .new {
        //     position: absolute;
        //     right: 30px;
        //     top: -10px;
        //     padding: 5px 10px;
        //     font-size: 12px;
        //     line-height: 18px;
        //     border: 2px solid rgb(0, 0, 0);
        //     border-radius: 8px;
        //     color: rgb(0, 0, 0);
        //     background-color: rgb(163, 213, 36);
        //     z-index: 1;
        //   }
        //   .desc {
        //     // font-weight: normal;
        //     font-size: 12px;
        //     line-height: 18px;
        //   }
        // }
      }
    }
  }
  .invite_root {
    color: #1E1E1B;
    position: relative;
    width: 100%;
    .subTitle {
      font-size: 14px;
      line-height: 20px;
      strong {
        color: #A3D524;
        text-decoration: underline;
        flex-basis: auto;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .subTxt {
      font-size: 24px;
      line-height: 36px;
      // font-weight: bold;
    }
    .subTags {
      margin: 20px 0 30px 0;
      font-size: 16px;
      line-height: 24px;
    }
    .show_button {
      text-align: center;
      height: 40px;
      width: 285px;
      font-size: 14px;
      line-height: 40px;
      // font-weight: bold;
      border: 2px solid #000000;
      border-radius: 20px;
      margin: 0 auto;
      background-color: #F9F2E1;
    }
  }
  .our_box {
    .subTitle {
      justify-content: center;
    }
    img {
      width: 100%;
      margin-top: 10px;
      aspect-ratio: 1.3157894736842106;
    }
  }
}
.close {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 10px;
  right: 5px;

}
.posterImg {
  width: 260px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}
.tips {
  font-size: 14px;
  color: #fff;
  text-align: center;
}
</style>